<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="danger" class="fr" style="vertical-align: middle" @click="doUnbind" :loading="submitLoading"
      v-permission="'unbindPackage.edit'">
      解除包装序号
    </el-button>
    <div class="filter-container">
      <el-select class="filter-item" v-model="query.snType" placeholder="选择解除类型">
        <el-option v-for="i in opsOptions" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-input style="width: 300px;margin-left:8px;" :placeholder="'请输入待解除的序号按回车'" clearable
        prefix-icon="el-icon-search" class="filter-item" @change="research" v-model="query.sn"></el-input>
      <el-button type="success" plain @click="research" class="filter-item">查询</el-button>
    </div>
    <div class="mt-15" v-show="query.snType=='package'">
      <package-tree ref="packTree" :rootSn="currentSn"></package-tree>
    </div>
    <div class="mt-15" v-show="query.snType=='ssn'">
      <z-table :list="list" :tableProps="tableProps" @selection-change="tableSelected" :columns="columns">
      </z-table>
      <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
        @change="getList"></z-pagination>
    </div>
    <el-dialog v-move title="解除包装" width="60%" :close-on-click-modal="false" :visible.sync="dialogVisible"
      append-to-body>
      <z-form :data="data" :formProps="formProps" :fields="fields"></z-form>
      <div class="text-right">
        <slot name="footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click.native="doSubmit" :loading="submitLoading">确认
          </el-button>
        </slot>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import packageTree from '@/views/components/packageTree'

export default {
  mixins: [commonMixin],
  name: 'unbindPackage',
  components: { packageTree },
  data: function () {
    return {
      pageLoading: false,
      submitLoading: false,
      opsOptions: [
        { label: '出货序号', value: 'ssn' },
        { label: '包装序号', value: 'package' },
      ],
      query: {
        snType: null,
        sn: null,
        snorssn: null,
        page: 1,
        size: 10,
      },
      tableProps: {
        hideOperations: true,
        selection: {
          showSelection: true,
          props: {
            selectable: (row) => !!row.shipping_sn,
          },
        },
        events: {
          select: this.tableSelected,
        },
      },
      columns: [
        { title: '工单号', key: 'mo_no' },
        { title: '产品序号', key: 'serial_number' },
        { title: '出货SSN', key: 'shipping_sn' },
        { title: '批次数量', key: 'batch_qty' },
        { title: '良品数量', key: 'ok_qty' },
        { title: '修改人', key: 'modify_user' },
        { title: '修改时间', key: 'modify_time' },
      ],
      fields: [
        {
          title: '解除类型',
          key: 'clear_type',
          name: 'select',
          tips: '',
          options: [
            { label: '解除本层包装', value: 1 },
            { label: '全部解除到产品', value: 2 },
          ],
          props: {},
          required: true,
        },
        {
          title: '解除后指站到工序',
          key: 'next_group',
          name: 'select',
          options: [],
          props: {},
          required: true,
        },
        { title: '解除原因', key: 'reason', name: 'textarea', required: true },
      ],
      dialogVisible: false,
      currentSn: null,
      selectRows: [],
    }
  },
  methods: {
    getGroupOptions(mo) {
      this.$request(this.$api.changeStation + 'getgroup', { mo })
        .then((r) => {
          this.setFieldOptions('next_group', r, 'group_id', 'group_name')
        })
        .catch(() => {})
    },
    research() {
      if (!this.query.snType) return this.$message.error('请先选择解除类型')
      if (!this.query.sn) return this.$message.error('请输入序号')
      if (this.query.snType == 'package') this.currentSn = this.query.sn
      if (this.query.snType == 'ssn') {
        this.query.page = 1
        this.getList()
      }
    },
    getList() {
      this.query.snorssn = this.query.sn
      this.$request(this.$api.bindsn + 'GetMoSnDetailList', this.query).then((r) => {
        this.list = r.list
        this.total = r.total
      })
    },
    tableSelected(rows) {
      this.selectRows = rows
    },
    doUnbind() {
      if (this.query.snType == 'ssn') {
        if (this.selectRows.length == 0) return this.$message.error('请先选择待解除的数据')
        this.$prompt('请输入解除原因', '提示')
          .then(({ value }) => {
            this.doSubmit(value)
          })
          .catch(() => {})
      }
      if (this.query.snType == 'package') {
        if (this.$refs.packTree.wip.package_level == 0) return this.$message.error('此序号不是包装序号，无法解除')
        if (this.$refs.packTree.wip.sn_status != 1) return this.$message.error('此包装序号已经进行下一层包装，无法解除')
        this.getGroupOptions(this.$refs.packTree.wip.mo_no)
        this.data = { sn: this.$refs.packTree.wip.serial_number, package_level: this.$refs.packTree.wip.package_level }
        this.dialogVisible = true
      }
    },
    doSubmit(reason) {
      if (this.query.snType == 'ssn') {
        if (!reason) return this.$message.error('请输入解除原因')
        this.$request(
          this.$api.unPack + 'releasessn',
          {
            reason: reason,
            ssn_list: this.selectRows.map((x) => x.shipping_sn),
          },
          'post',
        ).then((r) => {
          this.$message.success('操作成功')
          this.selectRows = []
          this.getList()
        })
      }
      if (this.query.snType == 'package') {
        if (!this.data.clear_type) return this.$message.error('解除类型不能为空')
        if (!this.data.reason) return this.$message.error('解除原因不能为空')
        if (!this.data.next_group) return this.$message.error('解除后指向工站不能为空')
        this.submitLoading = true
        this.$request(this.$api.unPack + 'submit', this.data, 'post')
          .then((r) => {
            this.$message.success('操作成功')
          })
          .finally(() => {
            this.submitLoading = false
          })
      }
    },
  },
  computed: {},
  created: function () {},
  watch: {
    data: function (val) {},
  },
}
</script>

<style scoped>
</style>
